<template>
  <div class="index">
    <!-- banner -->
    <div class="index_banner">
      <img :src="bannerimg" alt="" />
    </div>

    <!-- 咨询低价填写信息 -->
    <div class="index_infor">
      <div class="infor_all">
        <div class="all_tit">免费咨询底价</div>
        <div class="message_content">
          <label> 姓 名</label>
          <input type="span" @input="linkman" v-model="span" />
        </div>
        <div class="message_content">
          <label>手机号码</label>
          <input type="number" @input="mobile" v-model="phone" oninput="if(value.length>11)value=value.slice(0,11)"/>
        </div>
        <!-- 所在城市 -->
        <div class="infor_car" @click="toSelectCity">
          <span class="infor_titA">所在城市</span>
          <div class="infor_select">
            <span>{{ cityname ? cityname : "" }}</span>
            <img src="../../assets/images/more.png" />
          </div>
        </div>
        <!-- 意向车型 -->
        <div class="infor_car" @click="totrademark">
          <span class="infor_titA">意向车型</span>
          <div class="infor_select">
            <span>{{ namespan ? namespan : "" }}</span>
            <img src="../../assets/images/more.png" />
          </div>
        </div>
        <!-- 隐私协议 -->
        <div class="order_agreement">
          <div class="agreement_tit">
            <input class="checkbox" type="checkbox" v-model="checked" @click="onChange">
            <span style="color: #999999;">我已阅读并同意</span>
            <span @click="negotiatedClick">《淘车宝贝用户协议》</span>
            <span style="color: #999999;">和</span>
            <span @click="negotiatedClickA">《隐私政策》</span >
          </div>
        </div>
        <!-- 询问底价 -->
        <div class="infor_btn" @click="floorpriceClick">免费询底价</div>
      </div>
    </div>    


    <!-- banner -->
    <div class="index_banner">
      <van-swipe
        class="my-swipe"
        :autoplay="2000"
        indicator-color="white"
      >
        <van-swipe-item v-for="(item, index) in bannerlist" :key="index">
          <img :src="item" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 咨询低价填写信息 -->
    <div class="index_infor">
      <div class="infor_all">
        <div class="all_tit">免费咨询底价</div>
        <div class="message_content">
          <label> 姓 名</label>
          <input type="span" @input="linkman" v-model="span" />
        </div>
        <div class="message_content">
          <label>手机号码</label>
          <input type="number" @input="mobile" v-model="phone" oninput="if(value.length>11)value=value.slice(0,11)"/>
        </div>
        <!-- 所在城市 -->
        <div class="infor_car" @click="toSelectCity">
          <span class="infor_titA">所在城市</span>
          <div class="infor_select">
            <span>{{ cityname ? cityname : "" }}</span>
            <img src="../../assets/images/more.png" />
          </div>
        </div>
        <!-- 意向车型 -->
        <div class="infor_car" @click="totrademark">
          <span class="infor_titA">意向车型</span>
          <div class="infor_select">
            <span>{{ namespan ? namespan : "" }}</span>
            <img src="../../assets/images/more.png" />
          </div>
        </div>
        <!-- 隐私协议 -->
        <div class="order_agreement">
          <div class="agreement_tit">
            <input class="checkbox" type="checkbox" v-model="checked" @click="onChange">
            <span style="color: #999999;">我已阅读并同意</span>
            <span @click="negotiatedClick">《淘车宝贝用户协议》</span>
            <span style="color: #999999;">和</span>
            <span @click="negotiatedClickA">《隐私政策》</span >
          </div>
        </div>
        <!-- 询问底价 -->
        <div class="infor_btn" @click="floorpriceClick">免费询底价</div>
        <!-- @click="floorpriceClick" -->
      </div>
    </div>       

    <!-- 用户协议提示弹框 -->
    <div class="protocolCheck">
      <van-popup v-model="show" bind:close="protocolClose" round>
        <div class="box">
          <div class="box_title">温馨提示</div>
          <div class="box_con">
            <div>感谢您信任并使用淘车宝贝！</div>
            <div>我们十分重视您的个人信息和隐私保护。</div>
            <div>为了更好的保障您的个人权益，请您仔细阅读<span @click="negotiatedClick">《淘车宝贝用户协议》</span>、<span @click="negotiatedClickA">《隐私政策》</span>以便了解我们收集、使用、共享、存储信息情况及对信息的保护措施。请您充分阅读并理解上述协议，点击同意按钮即表示你已同意上述协议及以上约定。</div>
          </div>
          <div class="box_btn">
            <div style="margin-right:16px;border:1px solid #DDDDDD;color:#999" @click="disagree">不同意</div>
            <div style="background: #F54224;" @click="consent">同意</div>
          </div>
        </div>
      </van-popup>
    </div>

  </div>
</template>

<script>
// import { Toast } from 'vant';
export default {
  name: "index",
  data: () => ({
    checked: false,
    cityname: "",
    cityregion_lv3_id: "",
    bannerimg: "",
    bannerlist: "",
    namespan: "",
    product_option_id: "",
    span: "",
    phone: "",
    show:false,
    code:'',
    bardlist:''
  }),
  created() {
    this.code=this.$route.query.code
    this.getImageList();
  },
  mounted() {
    console.log(this.cityregion_lv3_id)
    if(JSON.parse(localStorage.getItem('span'))){
      this.span = JSON.parse(localStorage.getItem('span'))
    }
    if(JSON.parse(localStorage.getItem('phone'))){
      this.phone = JSON.parse(localStorage.getItem('phone'))
    }
    if(JSON.parse(localStorage.getItem('city'))){
      this.cityname = JSON.parse(localStorage.getItem('city')).city
      this.cityregion_lv3_id = JSON.parse(localStorage.getItem('city')).region_lv3_id
    }
    if(JSON.parse(localStorage.getItem('vehicle'))){
      this.namespan = JSON.parse(localStorage.getItem('vehicle')).namespan
      this.product_option_id = JSON.parse(localStorage.getItem('vehicle')).product_option_id
    }
  },
  methods: {
    // 轮播图接口数据列表
    getImageList() {
      console.log(this.code)
      this.$http.getImageList({code:this.code}).then((res) => {
        console.log(res);
        this.bannerlist = res.data.rotate_image;
        this.bannerimg = res.data.home_image;
        this.bardlist = res.data.series_list
        if(res.data.region_lv3_id){
          this.cityregion_lv3_id = res.data.region_lv3_id
          this.cityname = res.data.region_lv3_name
        }else{
          if(JSON.parse(localStorage.getItem('city'))){
            this.cityname = JSON.parse(localStorage.getItem('city')).city
            this.cityregion_lv3_id = JSON.parse(localStorage.getItem('city')).region_lv3_id
          }else{
            this.cityname = ""
            this.cityname = ""
          }
        }
        console.log(this.bannerlist);
      });
    },

    // 选择城市
    toSelectCity(){
      console.log(this.cityregion_lv3_id)
      if(this.cityregion_lv3_id){
        return
      }else{
        this.$router.push({ 
          name:'SelectCity' ,
          params: { code: this.code }
        })
      }
    },

    // 意向车型
    totrademark(){
      this.$router.push({
        name:'trademark',
        params: { 
          code: this.code,
          bardlist:this.bardlist
        }
      })
    },

    // 不同意
    disagree(){
      this.show = false
      this.checked = false
    },

    // 同意
    consent(){
      this.show = false
      this.checked = true
    },

    // 监听用户协议勾选
    onChange() {
      this.checked = !this.checked
    },
    //协议
    negotiatedClick() {
      this.$router.push({
        name:'userAgreement',
        params: { code: this.code }
      })
    },
    //隐私
    negotiatedClickA() {
      this.$router.push({ 
        name:'privacyPolicy' ,
        params: { code: this.code }
      })
    },

    // 监听姓名输入
    linkman(e) {
      this.span = e.target.value
      console.log(this.span)
      localStorage.setItem('span',JSON.stringify(this.span))
    },
    // 监听手机号输入事件
    mobile(e) {
      this.phone = e.target.value
      console.log(this.phone)
      localStorage.setItem('phone',JSON.stringify(this.phone))
    },

    // 点击询问底价
    floorpriceClick() {
      if(!this.span){
        this.$toast('请输入姓名');
        return
      }
      if(this.phone == ''){
        this.$toast('请输入手机号');
        return
      }
      if (this.phone.length < 11) {
        this.$toast('手机号不满11位');
        return
      }
      if(!(/^1[34578]\d{9}$/.test(this.phone))){
        this.$toast('手机号有误');
        return
      }
      if(!this.cityregion_lv3_id){
        this.$toast('请选择所在城市');
        return
      }
      if(!this.product_option_id){
        this.$toast('请选择意向车型');
        return
      }
      if(!this.checked){
        // this.$toast('请同意勾选协议');
        this.show = true
        return
      }
      let data = {
        name:this.span,
        mobile:this.phone,
        region_lv3_id:this.cityregion_lv3_id,
        series_id:this.product_option_id,
        code:this.code
      }
      this.$http.landingPagepostAdd(data).then(res=>{
        console.log(res)
        if(res.code == 0 && res.msg == 'success'){
          // this.$toast('提交成功');
          this.cityname = ''
          this.cityregion_lv3_id = ''
          this.namespan = ''
          this.product_option_id = ''
          this.span = ''
          this.phone = ''
          this.checked = false
          localStorage.removeItem('city')
          localStorage.removeItem('vehicle')
          localStorage.removeItem('span')
          localStorage.removeItem('phone')
          this.$router.push({
            name:'successfully',
            params: { 
              data: res.data,
              code:this.code
            }
          })
        }
      })
    },
  },
}; 
</script>

<style>
@import "index";
</style>